import { CellType } from ".";
import { dom } from "../tool";

// 新增按钮
function AddButton(this: CellType, attribute: any = {}, mode = 3, template: any) {
    this.type = 5;
    attribute.type = 5;
    this.attrData = attribute;
    this.parentContainer = template;
    const { placeholder, defaultValue, disabled, readonly, fieldName, rows, cols } = attribute;
    let fName = fieldName ? fieldName : Math.random().toFixed(4);
    this.attrData.fieldName = fName;
    let attribDiv;
    let selectedCell: any;
    let count = 0;
    const container = dom('div', {
        style: {
            height: 'auto'
        }
    });
    const addDiv: any = {};
    const fieldNameChange = (arg: any) => {
        this.attrData.fieldName = arg.target.value;
    }
    const getSelectedCell = (event: any) => {
        if (template.getSelectedCells) {
            selectedCell = template.getSelectedCells();
            addDiv.addBut.style.display = 'none';
            addDiv.showDiv.style.display = 'block';
        }
        event.stopPropagation();
        event.cancelBubble = true;
        return false;
    }
    const showSelectedCells = () => {
        if (!selectedCell) {
            if (template.findGroupCells) {
                selectedCell = template.findGroupCells(this.attrData.fieldName);
            }
        }
        if (template.showGroupCells) {
            template.showGroupCells(selectedCell);
        }
    }
    const resetSelectedCells = () => {
        if (selectedCell) {
            selectedCell = undefined;
            this.attrData.cellInfos = undefined;
            this.attrData.rows = 0;
        }
        addDiv.addBut.style.display = 'inline-block';
        addDiv.showDiv.style.display = 'none';
    }
    const addRow = (value?: any) => {
        template.addCellsByGroupName(fName, this.attrData.cellInfos, value);
        count += 1;
        if (count < 2) {
            addDiv.delBut.disabled = false;
        }
    }
    const addBeforeRows = () => {
        if (template && template.addCellsByGroupName && this.attrData.cellInfos instanceof Array) {
            addRow();
        }
    }
    function delLastRows() {
        if (template && template.delCellsByGroupName) {
            template.delCellsByGroupName(fName, rows);
            count -= 1;
        }
        if (count == 0) {
            addDiv.delBut.disabled = true;
        }
    }
    this.setDisabled = (arg) => { };
    this.setVisible = (arg) => { };
    this.setReadonly = (arg) => { };
    this.getValue = () => {
        const values: any = [];
        if (template && template.getGroupComponents) {
            const cells = template.getGroupComponents(this.attrData.fieldName);
            cells.forEach((infos: any) => {
                const temp: any = {};
                infos.forEach((item: any) => {
                    if (item.attrData.fieldName && item.getValue) {
                        temp[item.attrData.fieldName] = item.getValue();
                    }
                });
                values.push(temp);
            })
        }
        console.log(values)
        return values;
    };
    this.setValue = (arg) => {
        if (arg instanceof Array && arg.length > 0) {
            const cells = template.getGroupComponents(this.attrData.fieldName);
            const value = arg[0];
            cells[0].forEach((item: any) => {
                if (item.attrData.fieldName && item.setValue) {
                    item.setValue(value[item.attrData.fieldName]);
                }
            })
            if (template && template.addCellsByGroupName && this.attrData.cellInfos instanceof Array) {
                for (let i = 1; i < arg.length; i += 1) {
                    addRow(arg[i]);
                }
            }

        }
    };
    this.reset = () => { };
    // 设置此组件的属性  返回DOcumentNode
    // this.getAttribNode = () => {}
    // 调整本组件的尺寸和位置
    this.sizeChange = () => { };
    this.getAttrData = function () {
        if (selectedCell && selectedCell.length > 0 && template.getGroupCellsInfo) {
            this.attrData.cellInfos = template.getGroupCellsInfo(selectedCell, this.attrData.fieldName);
            this.attrData.rows = this.attrData.cellInfos ? this.attrData.cellInfos.length : 0;
        }
        return this.attrData;
    }
    this.render = () => {
        container.innerHTMML = "";
        if (mode == 1) {
            addDiv.addBut = dom('button', {
                target: container,
                className: 'gkh-button',
                innerText: '确定选择的单元格',
                style: {
                    marginRight: '8px'
                },
                listeners: {
                    click: getSelectedCell
                }
            });
            dom('span', { target: container, childs: [dom('label', { innerText: '字段名：' }), dom('input', { attribute: { value: fName ? fName : '' }, listeners: { change: fieldNameChange } })] })
            addDiv.showDiv = dom('div', {
                target: container,
                style: {
                    display: 'none',
                },
                childs: [dom('button', {
                    className: 'gkh-button',
                    innerText: '查看已选单元格',
                    listeners: {
                        click: showSelectedCells
                    }
                }), dom('button', {
                    className: 'gkh-button',
                    innerText: '重选',
                    listeners: {
                        click: resetSelectedCells
                    }
                })]
            });
            if (this.attrData.cellInfos) {
                addDiv.addBut.style.display = 'none';
                addDiv.showDiv.style.display = 'block';
            }
        } else if (mode == 2) {
            addDiv.addBut = dom('button', {
                target: container,
                className: 'gkh-button',
                innerText: '新增',
                listeners: {
                    click: addBeforeRows
                }
            });
            addDiv.delBut = dom('button', {
                target: container,
                className: 'gkh-button',
                innerText: '删除',
                listeners: {
                    click: delLastRows
                }
            });
            addDiv.delBut.disabled = true;
        }
        return container;
    };
    this.renderAfter = () => {

    }
}

export default AddButton as unknown as CellType;